iT邦幫忙

2024 iThome 鐵人賽

DAY 12
1

若將兩者錯放,極尷尬也。
img

圖片來源:我
每個倉鼠屁屁都是極品。

本篇將紀錄前篇提及之鼠輩事件button屬性。

鼠輩事件之button屬性

與點按鼠輩及放開鼠輩相關之鼠輩事件,其button屬性之值表此事件是由何點按處所觸發。

規範原文:
During mouse events caused by the depression or release of a mouse button, button MUST be used to indicate which pointer device button changed state.

不同點按處觸發鼠輩事件,其與button屬性之值之關係如下:
值為0,表主要點按處,通常為左處
值為1,表輔助點按處,通常為中央頭頂處,附有滾動功能
值為2,表次要點按處,通常為右處
值為3,表側邊控制處,通常為上一步控制處
值為4,表側邊控制處,通常為下一步控制處

以下示例將借用他人之意識介面 (滑鼠按鍵測試網站),觀察鼠輩事件button屬性之值。藉由介面顯示之鼠輩點按處,可得知此點按處與button屬性之值之關聯。

首先確認此介面可正確偵測當下點按鼠輩的點按處。
img

確認完畢。是隻健康的鼠輩。
觀察介面之測試框元素。
img

取得測試框元素。

const testArea = document.querySelector("#mouse-container");

並於測試框設定事件觀測器,觀測mousedown事件後於操術板印出事件之button屬性。

testArea.addEventListener("mousedown", (event) => {
  console.log(event.button);
});

可確認鼠輩點按處與button屬性之值之關聯確實如上述所紀錄之。
img

需注意若是與點按鼠輩及放開鼠輩無關之鼠輩事件,其button屬性之值不會被更新,值仍為0。因此button屬性之值為0不一定代表鼠輩之主要點按處受到點按。

於測試框設定另一事件觀測器,觀測mousemove事件後於操術板印出事件之button屬性。

testArea.addEventListener("mousemove", (event) => {
  console.log(event.button);
});

鼠輩於測試框移動時,於操術板皆印出0,然而介面並無顯示鼠輩之左處遭受點按,因此使用button屬性時需謹慎為之。
img

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day12

翻譯

鼠輩:滑鼠
點按處:按鍵
左處:左鍵
右處:右鍵
中央頭頂處:滾輪按鈕
側邊點按處:側鍵、多功能鍵
意識介面:網站

相關連結


上一篇
Day 11 - 和DNA結構沒有任何關係
下一篇
Day 13 - 如果有很多屁股也不叫buttons
系列文
元素不可思議事件簿30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言